@import "@/style/scss/index.scss";

.login-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  display: flex;
  .left-box {
    display: flex;
    flex-direction: column;
    margin: auto auto auto 219px;
    width: 500px;
    .title {
      font-size: 45px;
      font-weight: 400;
      color: #FFFFFF;
    }
    .detail {
      margin-top: 16px;
      font-size: 18px;
      font-weight: bold;
      color: #FFFFFF;
      opacity: 0.7;
      line-height: 32px;
    }
    .login-button {
      width: 500px;
      height: 60px;
      background: #FFFFFF;
      box-shadow: 0px 6px 64px 1px rgba(103, 162, 227, 0.78);
      border-radius: 30px;
      border-color: transparent;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      color: #39A4FF;
      margin-top: 58px;
    }
    .input-container {
      margin-top: 8%;
      .input-box {
        margin-bottom: 31px;
        .title {
          margin-left: 13px;
          font-size: 18px;
          font-weight: bold;
          color: #FFFFFF;
        }
        .input-row {
          margin-top: 17px;
          width: 500px;
          height: 60px;
          background: rgba(0,0,0,0.1);
          border-radius: 30px;
          display: flex;
          border: solid 1px transparent;
          &.active {
            border: solid 1px #ffffff;
          }
          img {
            height: 30px;
            width: 30px;
            margin: auto 0 auto 27px;
          }
          .input-border {
            margin: auto auto auto 12px;
            height: 60px;
            width: 372px;
            input {
              height: 60px;
              border: transparent;
              background: transparent;
              width: 100%;
              font-size: 17px;
              color: white;
            }
            input::-webkit-input-placeholder {
              font-size: 17px;
              font-weight: bold;
              color: #C3E0FF;
            }
          }
          .show-password {
            height: 30px;
            width: 30px;
            margin: auto;
            background: red;
            border: transparent;
            background: url("~@media/login/login-password-hide@2x.png") no-repeat;
            background-size: 100%;
            &.active {
              background: url("~@media/login/login-password-show@2x.png") no-repeat;
              background-size: 100%;
            }
          }
        }
      }
      .check-box {
        margin: 31px auto auto 9px;
        display: flex;
        .check-button {
          width: 20px;
          height: 20px;
          background: url("~@media/login/login-uncheck@2x.png") no-repeat;
          background-size: 100%;
          &.active {
            background: url("~@media/login/login-check@2x.png") no-repeat;
            background-size: 100%;
          }
        }
        span {
          font-size: 18px;
          font-weight: 300;
          line-height: 20px;
          color: #FFFFFF;
          margin: auto auto auto 17px;
        }
      }
    }
  }

  .right-box {
    margin: 137px 1px auto auto;
    img {
      width: 1098px;
      height: 848px;
    }
  }
}
